<template>
  <div class="change">
    <div class="changeCon">
      <el-form ref="form" :model="form" :rules="rules" label-width="20%">
        <el-row>
          <el-form-item label="项目名称" prop="name" required>
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="预计开发时间" required>
            <el-col :span="11">
              <el-date-picker
                v-model="form.startTime"
                type="date"
                placeholder="预计开始日期"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
            <el-col :span="2" class="line">-</el-col>
            <el-col :span="11">
              <el-date-picker
                v-model="form.endTime"
                type="date"
                placeholder="预计结束日期"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="项目所属" prop="super" required>
           <el-col :span="11">
              <el-select v-model="form.super" filterable placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in formList.superList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="项目类型" required>
            <el-col :span="11">
              <el-select v-model="form.type" filterable placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in formList.typeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="项目等级" required>
            <el-col :span="11">
              <el-select v-model="form.grade" filterable placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in formList.gradeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="项目描述" prop="desc" required>
            <el-input type="textarea" v-model="form.desc" class="textarea"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="上传相关材料" required>
            <el-upload action="#" list-type="picture-card"  :auto-upload="false" :before-upload="beforeUpload">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  v-if="filterImg(file.name)"
                  :src="file.url"
                  alt
                >
                <div class="fileStyle" v-else>
                  <i class="fileIcon el-icon-document"></i>
                  <span class="fileName">{{file.name}}</span>
                </div>

                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    v-if="filterImg(file.name)"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span class="el-upload-list__item-delete" @click="handleDownload(file)">
                    <i class="el-icon-download"></i>
                  </span>
                  <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
              <div class="el-upload__tip" slot="tip">只能上传zip/rar等格式压缩文件，文件包含（需求文档、表结构、接口文档等相关文件）</div>
            </el-upload>
            <el-dialog :visible.sync="imgProp.dialogVisible">
              <img width="100%" :src="imgProp.dialogImageUrl" alt>
            </el-dialog>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item class="btn">
            <el-button type="primary" @click="onSubmit" icon="el-icon-upload">提交</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { validator } from "common/js/valid";
export default {
  data() {
    return {
      form: {
        name: "", //项目名称
        super:"",//项目所属
        startTime: "", //开始时间
        endTime: "", //结束时间时间
        desc: "", //项目描述
        type: "", //项目类型
        grade: "" //项目等级
      },
      formList: {
        superList:[ //项目所属列表
          {
            name:'灵活就业',
            value:'01'
          },
          {
            name:'就失业服务',
            value:'02'
          },
          {
            name:'职业介绍服务',
            value:'03'
          },
          {
            name:'技能提升行动',
            value:'04'
          }
        ],
        typeList: [
          //项目类型列表
          {
            name: "新增",
            value: "01"
          },
          {
            name: "变更",
            value: "02"
          },
          {
            name: "bug",
            value: "03"
          },
          {
            name: "保修",
            value: "04"
          }
        ],
        gradeList: [
          //项目等级列表
          {
            name: "不急",
            value: "01"
          },
          {
            name: "一般",
            value: "02"
          },
          {
            name: "着急",
            value: "03"
          }
        ]
      },
      imgProp:{ //图片展示相关属性
        dialogImageUrl: '',
        dialogVisible: false,
      },
      rules: {
        name: [{ validator: validator('256, "full", "项目名称", false') }],
        desc: [{ required: true, message: "请输入项目描述", trigger: "blur" }]
      }
    }; 
  },
  methods: {
    onSubmit() {},
    // 过滤文件名
    filterImg(str) {
      let name = str.split(".")[1];
      return name == "jpg" || name == "png" || name == "gif";
    },
    // 点击预览图片
    handlePictureCardPreview(file){
      this.imgProp.dialogImageUrl = file.url;
        this.imgProp.dialogVisible = true;
    },
    // 上传之前校验
    beforeUpload(file){
      console.log('file',file);
      return true;
    }
  }
};
</script>

<style lang="scss" scoped>
.changeCon {
  width: 50%;
  margin: 0 auto;
}
.btn {
  text-align: center;
}
/deep/.textarea textarea {
  height: 180px;
}
/deep/.el-row {
  // margin: 20px 0;
}
/deep/.el-upload__tip {
  color: orange;
  font-size: 16px;
}
.fileStyle {
  display: flex;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 100%;
  flex-flow: column;
  flex-wrap: wrap;
  .fileIcon {
    font-size: 50px;
    text-align: center;
    color: #409eff;
    z-index: 1;
  }
  .fileName {
  }
}

/deep/ .el-upload-list--picture-card .el-upload-list__item-actions {
  z-index: 3;
}
/deep/ .el-upload-list__item > div {
  width: 100%;
  height: 100%;
}
</style>
